<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>jQuery EasyUI</title>
	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	<script>
	    $(function() {
	        $('#test').datagrid({
	            title: 'My Title',
	            iconCls: 'icon-save',
	            width: 600,
	            height: 350,
	            nowrap: false,
	            striped: true,
	            url: 'datagrid_data.aspx',
	            sortName: 'code',
	            sortOrder: 'desc',
	            idField: 'code',
	            frozenColumns: [[
	                { field: 'ck', checkbox: true },
	                { title: 'code', field: 'code', width: 80, sortable: true }
				]],
	            columns: [[
			        { title: 'Base Information', colspan: 3 },
					{ field: 'opt', title: 'Operation', width: 100, align: 'center', rowspan: 2,
					    formatter: function(value, rec) {
					        return '<span style="color:red"><a href="javascript:resize();" onclick="javascript:resize()"> Edit</a> Delete</span>';
					    } 
					}
				], [
					{ field: 'name', title: 'Name', width: 120,
					    formatter: function(value, rec) {
					        return "<input value='" + value + "' type='text' onclick='javascript:click();'/>";

					    }
					},
					{ field: 'addr', title: 'Address', width: 120, rowspan: 2, sortable: true },
					{ field: 'col4', title: 'Col41', width: 150, rowspan: 2 }
				]],
	            pagination: true,
	            rownumbers: true,
	            singleSelect: false,
	            toolbar: [{
	                text: 'Add',
	                iconCls: 'icon-add',
	                handler: function() {
	                    alert('add')
	                }
	            }, {
	                text: 'Cut',
	                iconCls: 'icon-cut',
	                disabled: true,
	                handler: function() {
	                    alert('cut')
	                }
	            }, '-', {
	                text: 'Save',
	                iconCls: 'icon-save',
	                handler: function() {
	                    alert($("#tt")[0].innerHTML);
	                }
}]
});
 
});
        var rows;
		function resize(){
			$('#test').datagrid({
				title: 'New Title',
				striped: true,
				width: 650,
				queryParams:{
					p:'param test',
					name:'My Name'
				}
			});
		}
		function getSelected(){
			var selected = $('#test').datagrid('getSelected');
			alert(selected.code + ":" + selected.name);
			rows = $('#test').datagrid('').data().datagrid.data.rows;
		}
		function getSelections(){
			var ids = [];
			var rows = $('#test').datagrid('getSelections');
			for(var i=0;i<rows.length;i++){
				ids.push(rows[i].code);
			}
			alert(ids.join(':'))
		}
		function clearSelections(){
		    //$('#test').datagrid('clearSelections');
		    //var data = $.data("datagrid").data;
		    //$('#test').datagrid._ec($('#test'));
		    //tr = $("#test").find("tr");

		    // var grid = $('#test').datagrid('').data().datagrid;
		    rows = $('#test').datagrid('').data().datagrid.data.rows;
		    var toolbar = $('#test').datagrid('').data().datagrid.options.toolbar;
		    toolbar.push({
		        text: 'ADD',
		        iconCls: 'icon-add',
		        disabled: false,
		        handler: function() {
		            alert('add')
		        }
		    });
		    toolbar.push({
		        text: 'ADD',
		        iconCls: 'icon-add',
		        disabled: false,
		        handler: function() {
		            alert('add')
		        }
		    });
		    toolbar.push({
		        text: 'ADD',
		        iconCls: 'icon-add',
		        disabled: false,
		        handler: function() {
		            alert('add')
		        }
		    });
		    $('#test').datagrid('').data();
		    alert(rows.length);
		    setTimeout(settr, 200);

		    function settr() {
		        if (rows.length > 0) {
		            for (var o in rows) {
		                //alert(rows[o].code);

		                var tr = $(".datagrid-body tr[datagrid-row-index=" + o + "]");
		                tr.addClass("datagrid-row-selected");
		            }
		        }
		    }
		    
		}
		function selectRow(){
			$('#test').datagrid('selectRow',2);
		}
		function selectRecord(){
			$('#test').datagrid('selectRecord','002');
		}
		function unselectRow(){
			$('#test').datagrid('unselectRow',2);
}
function click(o) {
    alert(o.parent.outerHtml);
}
		
	</script>
</head>
<body>
	<h1>DataGrid</h1>
	<div style="margin-bottom:10px;">
		<a href="#" onclick="resize()">resize</a>
		<a href="#" onclick="getSelected()">getSelected</a>
		<a href="#" onclick="getSelections()">getSelections</a>
		<a href="#" onclick="clearSelections()">clearSelections</a>
		<a href="#" onclick="selectRow()">selectRow</a>
		<a href="#" onclick="selectRecord()">selectRecord</a>
		<a href="#" onclick="unselectRow()">unselectRow</a>
	</div>
	
	<table id="test"></table>
	
</body>
</html>